<template>
    <div>
        <headbar 
        title="发布探索"
        :left="true" 
        classleft="el-icon-back" 
        @handleleft="toback"></headbar>
        <div class="img" :style="{backgroundImage:`url(https://picx.zhimg.com/v2-f4b495e713461c735a0373683436f506_r.jpg?source=172ae18b)`}"></div>
        <div class="mar main">
            <div class="box">
                <span style="margin-right: 10px;">标题:</span>
                <input type="text" name="title" v-model="title" class="tinput" />
            </div>
            <div class="box">
                <span style="float:left; margin-right: 10px;">内容:</span>
                <textarea name="centent" v-model="centent" class="centent"></textarea>
            </div>
            <div class="box theimgbox">
                <span style="float:left; margin-right: 10px;">图片:</span>
                <div class="outfile">
                    <div class="importimg">请插入图片</div>
                    <input type="file" class="file" ref="files" @input="changetext"/><!-- multiple可以让file表单多选文件 -->
                    <div>{{ imported }}</div>
                </div>
            </div>
            
            <div style="width: 100%;text-align: center;">
                <div class="post" @click="topost">提交</div>
            </div>
        </div>
    </div>
</template>

<script>
import headbar from '@/components/headbar.vue';
import axios from 'axios';
export default {
    components:{headbar},
    data(){
        return{
            title: '',
            centent: '',
            imported: ''
        }
    },
    methods:{
        toback(){
            this.$router.back()
        },
        topost(){
            if(this.title.length<1||this.centent.length<1||this.$refs.files.files.length<1){
                alert('请请全部填写')
            }else{
                let formsdata = new FormData()
                formsdata.append('username',this.$store.state.userobj.name)
                formsdata.append('title',this.title)
                formsdata.append('userid',this.$store.state.userobj.id)
                formsdata.append('centent',this.centent)
                formsdata.append('picture',this.$refs.files.files[0])
                axios.post('http://localhost:3000/exploration',formsdata,{
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                }).then(res=>{
                    this.$router.push('/world')
                })
            }
        },
        changetext(){
            console.log(this.$refs.files.files)
            this.imported = this.$refs.files.files[0].name
        }
    }
}
</script>

<style lang="scss" scoped>
.file{
    width: 1rem;
    height: 1.5rem;
    opacity: 0;
}
.outfile{
    border: 1px solid rgb(74, 152, 126);
    width: 1rem;
    height: 1.5rem;
    position: relative;
    float: left;
}
.importimg{
    position: absolute;
    width: 1rem;
    line-height: 1.5rem;
    text-align: center;
}
.img{
    width: 100%;
    height: 2rem;
    background-size: 3.75rem 2rem;
    background-position: center;
}
.box{
    margin:0.1rem 0 ;
}
.theimgbox{
    height: 1.8rem;
}
.box::after{
    display: block;
    content: '';
    height: 0px;
    clear: both;
}
.tinput{
    border: 0px;
    border-bottom: 2px solid rgb(74, 152, 126);
    width: 3.01rem;
}
.centent{
    width: 3.01rem;
    height: 1rem;
    float: left;
}
.post{
    width: 1rem;
    height: 0.25rem;
    background-color:rgb(74, 152, 126);
    line-height: 0.25rem;
}
.main{
    margin-bottom: 0.7rem;
}
</style>